<template>
  <div>
    <detail-banner
      :chooseList="chooseList"
      @goHome="goHome()"
      class="detail-banner"
      @activeIndex="activeIndex"
      ref="index"
    />
    <scroll
      class="scroll"
      :pullUpLoad="isPullUpLoad"
      :probeType="probeType"
      ref="scroll"
      @scroll="chooseTap"
    >
      <detail-swiper :topImages="topImages" class="detail-swiper" />
      <detail-key :goods="goods" />
      <detail-shop :shop="shop" />
      <detail-dress :dress="dress" />
      <detail-good-param
        :goodsParam="goodsParam"
        ref="goodsParam"
      ></detail-good-param>
      <detail-comment-info :commentInfo="commentInfo" ref="commentInfo" />
      <goods-list
        :goods="recommendList"
        class="goods-list"
        :list="2"
        name="recommendList"
        ref="recommendList"
      ></goods-list>
    </scroll>
    <detail-tarbar @addToCart="addToCart" @decToCart="decToCart"></detail-tarbar>
  </div>
</template>

<script>
import {
  getDetail,
  Goods,
  Shop,
  GoodsParam,
  Dress,
  getRecommend,
} from "network/detail";
import {inser_goods} from "network/insergoods"
import DetailBanner from "./children/DetailBanner";
import DetailSwiper from "./children/DetailSwiper";
import DetailKey from "./children/DetailKey";
import DetailShop from "./children/DetailShop";
import DetailDress from "./children/DetailDress";
import DetailCommentInfo from "./children/DetailCommentInfo";
import DetailGoodParam from "./children/DetailGoodParam";
import DetailTarbar from "./children/DetailTarbar"
import GoodsList from "content/goods/GoodsList";
import Scroll from "common/scroll/Scroll";

export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailSwiper,
    DetailKey,
    DetailShop,
    DetailDress,
    DetailGoodParam,
    DetailCommentInfo,
    DetailTarbar,
    GoodsList,
    Scroll,
  },
  data() {
    return {
      topImages: null,
      goods: {},
      shop: {},
      goodsParam: {},
      dress: {},
      chooseList: ["商品", "参数", "评论", "推荐"],
      probeType: 3,
      isPullUpLoad: true,
      commentInfo: {},
      recommendList: [],
      goodsdetail:{}
    };
  },
  created() {
    this.getiid();
    this.getDetail();
    this._getRecommend();
  },
  mounted() {},
  methods: {
    getiid() {
      this.iid = this.$route.query.iid;
    },
    getDetail() {
      getDetail(this.iid).then((res) => {
        const data = res.result;
        this.topImages = data.itemInfo.topImages;
        this.goods = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );

        this.shop = new Shop(data.shopInfo);
        this.goodsParam = new GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );

        this.dress = new Dress(data.detailInfo);

        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
      });
    },
    goHome() {
      this.$router.go(-1);
    },
    activeIndex(index) {
      switch (index) {
        case 0:
          this.$refs.scroll;
          this.$refs.scroll.scroll.scrollTo(0, 0, 1000);
          break;
        case 1:
          let gheight = this.$refs.goodsParam.$el.offsetTop;
          this.$refs.scroll.scroll.scrollTo(0, -gheight-1, 1000);
          break;
        case 2:
          let cheight = this.$refs.commentInfo.$el.offsetTop;
          this.$refs.scroll.scroll.scrollTo(0, -cheight-1, 1000);
          break;
        case 3:
          let rheight = this.$refs.recommendList.$el.offsetTop;
          this.$refs.scroll.scroll.scrollTo(0, -rheight-1, 1000);
          break;
        default:
          break;
      }
    },
    _getRecommend() {
      getRecommend().then((res, error) => {
        if (error) return;
        this.recommendList = res.data.list;
        this.recommendList.show = res.data.list.image;
      });
    },

    chooseTap(position) {
      let gheight = this.$refs.goodsParam.$el.offsetTop;
      let cheight = this.$refs.commentInfo.$el.offsetTop;
      let rheight = this.$refs.recommendList.$el.offsetTop;

      if (-position.y< gheight) {
        this.$refs.index.currentIndex = 0;
      }
      else if(-position.y<cheight){
        this.$refs.index.currentIndex = 1;
      }
      else if(-position.y<rheight){
        this.$refs.index.currentIndex = 2;
      }
      else{
        this.$refs.index.currentIndex = 3;
      }
    },
    addToCart() {
        // 1.创建对象
        const obj = {}
        // 2.对象信息
        obj.iid = this.iid;
        obj.imgURL = this.topImages[0]
        obj.title = this.goods.title
        obj.desc = this.goods.desc;
        obj.newPrice = this.goods.nowPrice;
        // 3.添加到Store中
        this.$store.commit('addCart', obj)
        this.goodsdetail = obj;
        inser_goods(obj.iid,obj.imgURL,obj.title,obj.desc,obj.newPrice).then(res=>{
          console.log(res);
        })
      },
    decToCart(){
              // 1.创建对象
        const obj = {}
        // 2.对象信息
        obj.iid = this.iid;
        obj.imgURL = this.topImages[0]
        obj.title = this.goods.title
        obj.desc = this.goods.desc;
        obj.newPrice = this.goods.nowPrice;
        // 3.添加到Store中
        this.$store.commit('decCart', obj)
    }
  },
};
</script>

<style lang="css" scoped>
.detail-banner {
  position: relative;
  top: 0;
  background-color: #ffffff;
  z-index: 9;
}
.detail-swiper {
  height: 40vh;
  width: auto;
}
.scroll {
  height: calc(100vh - 44px);
  overflow: hidden;
}
.goods-list {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 49px;
}
</style>